<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="uft-8">
    <title>动态创建标记</title>
</head>
<body>
<div id="testdiv">
    <p>This is <em>my</em> content.</p>
</div>
<script>
    function traditionalMethods() {
        document.write('<p>This is inserted.</p>');

        function insertParagraph(text) {
            var str = '<p>';
            str += text;
            str += '</p>';
            document.write(str);
        }

        function getInnerHTML() {
            window.onload = function () {
                var testdiv = document.getElementById('testdiv');
                alert(testdiv.innerHTML);
            }
        }

        function insertInnerHTML() {
            window.onload = function () {
                var testid = document.getElementById('testid');
                testid.innerHTML = '<p>I inserted <em>this</em> content.</p>';
            }
        }
    }

    function domMethods() {
        document.createElement('p');
        var para = document.createElement('p');

        function documentFragment() {
            window.onload = function () {
                var para = document.createElement('p');
                var info = 'nodeNmae: ';
                info += para.nodeName;
                info += ' nodeType: ';
                info += para.nodeType;
                alert(info);
            }
        }

        function appendChild() {
            var testdiv = document.getElementById('testdiv');
            var para = document.createElement('p');
            testdiv.appendChild(para);

            function or() {
                document.getElementById('testdiv').appendChild(document.createElement('p'));
            }
        }

        function createTextNode() {
            document.createTextNode('Hello world');
            var txt = document.createTextNode('Hello world');

            function onload() {
                var para = document.createElement('p');
                var testdiv = document.getElementById('testdiv');
                testdiv.appendChild(para);
                var txt = document.createTextNode('Hello world');
                para.appendChild(txt);
            }

            function or() {
                var para = document.createElement('p');
                var txt = document.createTextNode('Hello world');
                para.appendChild(txt);
                var testdiv = document.getElementById('testdiv');
                testdiv.appendChild(para);
            }

            function multiTextNode() {
                window.onload = function () {
                    var para = document.createElement('p');
                    var txt1 = document.createTextNode('This is ');
                    para.appendChild(txt1);
                    var emphasis = document.createElement('em');
                    var txt2 = document.createTextNode('my');
                    emphasis.appendChild(txt2);
                    para.appendChild(emphasis);
                    var txt3 = document.createTextNode(' content.');
                    para.appendChild(txt3);
                    var testdiv = document.getElementById('testdiv');
                    testdiv.appendChild(para);
                };

                function or() {
                    window.onload = function () {
                        var para = document.createElement('p');
                        var txt1 = document.createTextNode('This is ');
                        var emphasis = document.createElement('em');
                        var txt2 = document.createTextNode('my');
                        var txt3 = document.createTextNode(' content.');
                        para.appendChild(txt1);
                        emphasis.appendChild(txt2);
                        para.appendChild(emphasis);
                        para.appendChild(txt3);
                        var testdiv = document.getElementById('testdiv');
                        testdiv.appendChild(para);
                    };
                }
            }
        }
    }

    function againGallery() {
        function preparePlaceholder() {
            var placeholder = document.createElement('img');
            placeholder.setAttribute('id', 'placeholder');
            placeholder.setAttribute('src', 'images/placeholder.gif');
            placeholder.setAttribute('alt', 'my image gallery');
            var description = document.createElement('p');
            description.setAttribute('id', 'description');
            var text = document.createTextNode('Choose an image');
            description.appendChild(text);
            document.getElementsByTagName('body')[0].appendChild(placeholder);
            document.getElementsByName('body')[0].appendChild(description);

            function or() {
                document.body.appendChild(placeholder);
                document.body.appendChild(description);
            }

            var gallery = document.getElementById('image-gallery');
            gallery.parentNode.insertBefore(placeholder, gallery);
        }

        function insertAfter(newElement, targetElement) {
            var parent = targetElement.parentNode;
            if (parent.lastChild == targetElement) {
                parent.appendChild(newElement);
            } else {
                parent.insertBefore(newElement, targetElement.nextSibling);
            }
        }
    }

    function ajax() {
        var request = new ActiveXObject('Msxml2.XMLHTTP.3.0');

        function otherBroswer() {
            var request = new XMLHttpRequest();
        }

        function getHTTPObject() {
            if (typeof XMLHttpRequest == 'undefined') {
                XMLHttpRequest = function () {
                    try {
                        return new ActiveXObject('Msxml2.XMLHTTP.6.0');
                    } catch (e) {
                    }
                    try {
                        return new ActiveXObject('Msxml2.XMLHTTP.3.0');
                    } catch (e) {
                    }
                    try {
                        return new ActiveXObject('Msxml2.XMLHTTP');
                    } catch (e) {
                    }
                    throw new Error('No Found ActiveObject');
                }
            }
            return new XMLHttpRequest();
        }

        function getNewContent() {
            var request = getHTTPObject();
            if (request) {
                request.open('GET', 'example.txt', true);
                request.onreadystatechange = function () {
                    if (request.readyState == 4) {
                        var para = document.createElement('p');
                        var txt = document.createTextNode(request.responseText);
                        para.appendChild(txt);
                        document.getElementById('new').appendChild(para);
                    }
                };
                request.send(null);
            }else {
                alert('Sorry, your browser donsn\'t support XMLHTTPRequest');
            }
        }

        function crossORiginRequest() {
            function getNewContent() {
                var request = getHTTPObject();
                if (request) {
                    request.open('GET', 'example.txt', true);
                    request.onreadystatechange = function () {
                        if (request.readyState == 4) {
                            alert('Response Received');
                            var para = document.createElement('p');
                            var txt = document.createTextNode(request.responseText);
                            para.appendChild(txt);
                            document.getElementById('new').appendChild(para);
                        }
                    };
                    request.send(null);
                }else {
                    alert('Sorry, your browser donsn\'t support XMLHTTPRequest');
                }
                alert('Function Done');
            }
        }
    }
</script>
</body>
</html>